<template>
    <div class="iconList">
        <div class="IconItem">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-tuijian"></use>
            </svg>
            <span>
                每日推荐
            </span>
        </div>
        <div class="IconItem">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-diantai"></use>
            </svg>
            <span>
                电台
            </span>
        </div>
        <div class="IconItem">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-music"></use>
            </svg>
            <span>
                歌单
            </span>
        </div>
        <div class="IconItem">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-paihangbang"></use>
            </svg>
            <span>
                排行榜
            </span>
        </div>
    </div>
</template>

<style lang="less" scoped>
.iconList {
    margin-top: 10px;
    width: 100%;
    display: flex;
    height: 2rem;
    justify-content: space-around;
    align-items: center;

    .IconItem {
        height: 100%;
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .icon {
            width: 2em;
            height: 2em;

        }

        span {
            font-size: 15px;
        }


    }
}
</style>